<route lang="json5" type="page">
    {
      "needLogin": true,
      style: {
        navigationBarTitleText: '报修记录',
        enablePullDownRefresh: true,
      },
    }
    </route>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { httpGet } from '@/utils/http'

// 定义报修记录的类型
interface Record {
  createBy: string
  createTime: string
  elecId: string
  filePath: string
  id: string
  isDel: string
  name: string
  opinion: string
  phone: string
  reason: string
  result: string
  sysOrgCode: string
  tenantId: number
  updateBy: string
  updateTime: string
  waterId: string
}

type LoadMoreStatus = 'more' | 'loading' | 'noMore'

const recordList = ref<Record[]>([])
const loadingStatus = ref<LoadMoreStatus>('more')
const page = ref(1)
const pageSize = 10
const initialLoading = ref(true)

const wdState = computed<'loading' | 'finished' | null>(() => {
  if (loadingStatus.value === 'loading') {
    return 'loading'
  }
  if (loadingStatus.value === 'noMore') {
    return recordList.value.length > 0 ? 'finished' : null
  }
  return null
})

const { loading, error, data, run } = useRequest<any>(() => httpGet('/RepairRecord/bwReCd/list', {
  pageo: page.value,
  pageSize,
  name: '',
  phone: '',
  result: '',
}))

// 加载报修记录
async function loadRecords(reload = false) {
  if (reload) {
    page.value = 1
  }

  if (loadingStatus.value === 'noMore' && !reload)
    return

  loadingStatus.value = 'loading'

  try {
    const res = await run()
    console.log('res', res)
    if (reload) {
      recordList.value = []
    }

    if (res.result.records.length > 0) {
      recordList.value.push(...res.result.records)
      page.value++
      loadingStatus.value = 'more'
    }
    else {
      loadingStatus.value = 'noMore'
    }
  }
  catch (error) {
    console.error('Failed to fetch records:', error)
    loadingStatus.value = 'more' // Reset status on error
  }
  finally {
    if (initialLoading.value) {
      initialLoading.value = false
    }
    uni.stopPullDownRefresh()
  }
}

onLoad(() => {
  loadRecords(true)
})

// 下拉刷新
onPullDownRefresh(async () => {
  await loadRecords(true)
})

// 上拉加载
onReachBottom(() => {
  loadRecords()
})

function getStatusClass(status: '已处理' | '待处理') {
  return status === '已处理' ? 'text-green-500' : 'text-orange-500'
}

function previewImage(imageUrls: string[], current: number) {
  uni.previewImage({
    urls: imageUrls,
    current,
  })
}

function handleToDetail(record: Record) {
  uni.navigateTo({
    url: `/pages-admin/admin/repair/detail?id=${record.id}`,
  })
}
</script>

<template>
  <view class="record-page pt-4 pb-safe">
    <!-- 无数据提示 -->
    <view v-if="recordList.length === 0" class="pt-10 text-center text-gray-500">
      <wd-status-tip image="search" tip="暂无报修记录" />
    </view>

    <!-- 记录列表 -->
    <template v-else>
      <wd-card v-for="record in recordList" :key="record.id" class="mb-3">
        <view class="text-sm">
          <view class="flex items-center justify-between">
            <view>
              <text class="text-gray-500">
                日期：
              </text>
              <text>{{ record.createTime }}</text>
            </view>
            <view>
              <text class="font-bold" :class="getStatusClass(record.result as any)">
                {{ record.result }}
              </text>
            </view>
          </view>

          <view class="mt-2">
            <text class="text-gray-500">
              报修问题：
            </text>
            <text>{{ record.reason }}</text>
          </view>

          <view class="mt-2">
            <text class="text-gray-500">
              户号：
            </text>
            <text>{{ record.name }}</text>
          </view>

          <view class="mt-2">
            <text class="text-gray-500">
              紧急联系人：
            </text>
            <text>{{ record.phone }}</text>
          </view>

          <!-- <view v-if="record.filePath && record.filePath.length > 0" class="mt-2">
            <view class="mb-2 text-gray-500">
              上传图片：
            </view>
            <view class="flex flex-wrap gap-2">
              <image
                v-for="(img, index) in record.filePath" :key="index" :src="img" class="h-20 w-20 rounded"
                mode="aspectFill" lazy-load @click="previewImage(record.filePath, index)"
              />
            </view>
          </view> -->

          <view class="mt-2">
            <wd-button type="primary" custom-class="w-full mt-2" @click="handleToDetail(record)">
              查看详情
            </wd-button>
          </view>
        </view>
      </wd-card>
    </template>

    <!-- 加载更多 -->
    <wd-loadmore v-if="!initialLoading && wdState" :state="wdState" />
  </view>
</template>

<style lang="scss" scoped>
.record-page {
  box-sizing: border-box;
}
</style>
